<template>
  <div class="wrap">
    <el-row class="box">
      <el-col :span="8" class="lines list">
        <div class="top">
          <h3>场区列表</h3>
          <el-button type="primary" @click="addField">新增</el-button>
        </div>
        <div
          v-for="(item, index) in list"
          :key="item.id"
          @click="getSiteList(item, index)"
        >
          <el-card
            class="box-card"
            :shadow="cardIndex == index ? 'always' : 'never'"
            :style="
              cardIndex == index
                ? 'border:1px solid rgb(184 169 169)'
                : 'border:none'
            "
          >
            <p class="title">{{ item.regionName }}</p>
            <p>
              开放时间： {{ item.businessStartTime }}-{{ item.businessEndTime }}
            </p>
            <p>
              场次时长： {{ item.interval == 0 ? "间隔30分钟" : "间隔1小时" }}
            </p>
            <p>相关项目： {{ item.itemName }}</p>
            <div class="btn-list">
              <el-button
                type="primary"
                size="mini"
                @click.stop="addFieldArea(item)"
                >新增场地</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click.stop="editFielArea(item)"
                >编辑场区</el-button
              >
              <el-button type="danger" size="mini" @click="delRegion(item.id)"
                >删除</el-button
              >
            </div>
          </el-card>
        </div>
      </el-col>
      <!-- <span class="line"></span> -->

      <el-col
        :span="10"
        :offset="1"
        style="padding: 15px 15px 15px 0"
        class="list"
      >
        <div class="top">
          <h3>场地列表</h3>
        </div>
        <el-card class="box-card" v-for="item in siteList" :key="item.id">
          <p class="title">{{ item.siteName }}</p>
          <div class="btn-list">
            <el-button type="primary" size="mini" @click="ediSite(item)"
              >编辑场地</el-button
            >
            <el-button type="danger" size="mini" @click="delSite(item.id)"
              >删除</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
    <add-field ref="addField" />
    <add-field-area ref="addFieldArea" />
  </div>
</template>  


<script>
import addField from './add_field.vue'
import addFieldArea from './add_field_area.vue'
import { regionPageList, sitePageList, regionDel, siteDel } from '@/config/api'
export default {
  components: {
    addField,
    addFieldArea
  },
  data () {
    return {
      list: [],
      siteList: [],
      cardIndex: 0,
      siteId: 0
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    addFieldArea (item) {
      this.$refs.addFieldArea.addShow(item.id)

    },
    // 新增场地
    addField () {
      this.$refs.addField.addShow()
    },
    getData () {
      regionPageList({ page: 1, pageSize: 20 }).then(res => {
        this.list = res.data.result.list
        this.getSite(this.list[this.cardIndex].id)
      })
    },
    getSite (regionId) {
      sitePageList({ page: 1, pageSize: 20, regionId }).then(res => {
        this.siteList = res.data.result.list
      })
    },
    getSiteList (item, index) {
      this.cardIndex = index
      this.getSite(item.id)
    },
    delRegion (id) {
      this.$confirm('此操作将删除该场区, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        regionDel({ id }).then(res => {
          if (res.data.status == 200) {
            this.getData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    delSite (id) {
      this.$confirm('此操作将删除该场地, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        siteDel({ id }).then(res => {
          if (res.data.status == 200) {
            this.getData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    editFielArea (item) {
      this.$refs.addField.editShow(item)
    },
    ediSite (item) {
      this.$refs.addFieldArea.editShow(item)

    },
  }
}
</script>


<style scoped lang="scss">
.wrap {
}
.list {
  overflow-y: scroll;
  height: calc(100vh - 100px);
  &::-webkit-scrollbar-thumb {
    background-color: #ebeaef;
    border-radius: 10px;
  }
  /*滚动条整体样式*/
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /*滚动条里面轨道*/
  &::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 10px;
  }
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  margin-bottom: 20px;

  .title {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
  }

  p {
    line-height: 30px;
  }
}

.box {
}

.lines {
  border-right: 2px solid #e5e5e5;
  padding: 15px 4.16667% 15px 15px;
}

.btn-list {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.line {
  width: 1px;
  background: pink;
  position: fixed;
  top: 84px;
  bottom: 0;
  margin: 0 3.5%;
}
</style>